<template>
  <div class="area-map-container">
    <el-card class="area-map-header">
      <div class="header-title">
        <i class="el-icon-location"></i>
        <span>供应链区域分布图</span>
      </div>
      <div class="header-desc">
        查看供应链各区域分查看供应链各区域分布情况
      </div>
    </el-card>

    <el-row :gutter="20" class="area-maps">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="area-map-card">
          <div slot="header" class="card-header">
            <span>区域一: 中站区1</span>
            <el-button
              type="text"
              icon="el-icon-full-screen"
              @click="handlePreview('area1')"
            >查看全图</el-button>
          </div>
          <div class="area-map-content">
            <el-image
              :src="area1Image"
              fit="contain"
              :preview-src-list="[area1Image]"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
                <span>图片加载失败</span>
              </div>
            </el-image>
            <div class="area-info">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="区域范围">区域一、区域二、区域三</el-descriptions-item>
                <el-descriptions-item label="供应点">34</el-descriptions-item>
                <el-descriptions-item label="仓储中心">12</el-descriptions-item>
                <el-descriptions-item label="物流节点">28</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="area-map-card">
          <div slot="header" class="card-header">
            <span>区域二: 中站区2</span>
            <el-button
              type="text"
              icon="el-icon-full-screen"
              @click="handlePreview('area2')"
            >查看全图</el-button>
          </div>
          <div class="area-map-content">
            <el-image
              :src="area2Image"
              fit="contain"
              :preview-src-list="[area2Image]"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
                <span>图片加载失败</span>
              </div>
            </el-image>
            <div class="area-info">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="区域范围">区域一、区域二、区域三</el-descriptions-item>
                <el-descriptions-item label="供应点">27</el-descriptions-item>
                <el-descriptions-item label="仓储中心">9</el-descriptions-item>
                <el-descriptions-item label="物流节点">22</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="area-summary">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="data-item">
            <div class="data-icon">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="data-info">
              <div class="data-value">61</div>
              <div class="data-label">供应点总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <div class="data-icon" style="background-color: #67C23A">
              <i class="el-icon-box"></i>
            </div>
            <div class="data-info">
              <div class="data-value">21</div>
              <div class="data-label">仓储中心总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <div class="data-icon" style="background-color: #E6A23C">
              <i class="el-icon-truck"></i>
            </div>
            <div class="data-info">
              <div class="data-value">50</div>
              <div class="data-label">物流节点总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <div class="data-icon" style="background-color: #F56C6C">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="data-info">
              <div class="data-value">98%</div>
              <div class="data-label">覆盖率</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 全屏预览对话框 -->
    <el-dialog
      :title="previewTitle"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <div class="dialog-content">
        <el-image
          :src="previewImage"
          fit="contain"
          style="width: 100%;"
        >
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AreaMapDisplay',
  data() {
    return {
      area1Image: "https://static.zibovip.top/imgs/2025/04/8177064351375c59.jpg",
      area2Image: "https://static.zibovip.top/imgs/2025/04/07f89c1cd74cfac5.jpg",
      dialogVisible: false,
      previewImage: '',
      previewTitle: ''
    }
  },
  methods: {
    handlePreview(area) {
      if (area === 'area1') {
        this.previewImage = this.area1Image
        this.previewTitle = '区域一: 华东地区'
      } else {
        this.previewImage = this.area2Image
        this.previewTitle = '区域二: 华北地区'
      }
      this.dialogVisible = true
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.area-map-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);

  .area-map-header {
    margin-bottom: 20px;

    .header-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 10px;

      i {
        color: #409EFF;
        margin-right: 10px;
        font-size: 24px;
      }
    }

    .header-desc {
      color: #606266;
      font-size: 14px;
    }
  }

  .area-maps {
    margin-bottom: 20px;

    .area-map-card {
      margin-bottom: 20px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }

      .area-map-content {
        .el-image {
          width: 100%;
          height: 300px;
          border: 1px solid #ebeef5;
          border-radius: 4px;
          margin-bottom: 15px;

          &::v-deep .el-image__inner {
            padding: 10px;
          }
        }

        .image-error {
          height: 300px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #909399;

          i {
            font-size: 48px;
            margin-bottom: 15px;
          }
        }

        .area-info {
          margin-top: 15px;
        }
      }
    }
  }

  .area-summary {
    .data-item {
      display: flex;
      align-items: center;
      padding: 10px;

      .data-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background-color: #409EFF;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        margin-right: 15px;

        i {
          font-size: 24px;
        }
      }

      .data-info {
        .data-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          line-height: 1.2;
        }

        .data-label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }

  .dialog-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
  }
}
</style>

